<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="include/head::head"></head>

<body class="nav-md">
<div class="container body">
    <div class="main_container">
        <div th:replace="/include/sidebar"></div>

        <!-- top navigation -->
        <div th:replace="include/navigation::navigation"></div>
        <!-- /top navigation -->

        <!-- page content -->
        <div class="right_col" role="main">

            <div class="row">
                <div class="col-md-12 col-sm-12 ">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>软件工程题库</h2>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <div class="row">
                                <div class="col-md-12 col-sm-12 ">
                                    <div class="x_content">
                                        <br />
                                        <form id="single-upload" data-parsley-validate class="form-inline form-label-left" action="" method="post" onsubmit="return false">
                                            <div class="item form-group">
                                                <label >章节 <span class="required"></span>
                                                </label>
                                                <div class="col-md-3 col-sm-3 ">
                                                    <select class="form-control" id="section">
                                                        <option th:selected="${resultQuestionManage.sectionSelected==null}" class="empty-option">请选择</option>
                                                        <option th:each="section,sectionstate:${resultQuestionManage.sectionList}" th:value="${section.secId}" th:text="${section.secName}" th:selected="${section.secId==resultQuestionManage.sectionSelected}"></option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="item form-group">
                                                <label >题型 <span class="required"></span>
                                                </label>
                                                <div class="col-md-3 col-sm-3 ">
                                                    <select class="form-control" id="type">
                                                        <option th:selected="${resultQuestionManage.typeSelected==null}" class="empty-option">请选择</option>
                                                        <option th:each="type,typestate:${resultQuestionManage.typeList}" th:value="${type.dicId}" th:text="${type.dicValue}" th:selected="${type.dicId==resultQuestionManage.typeSelected}">Choose option</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="item form-group">
                                                <label >难度</label>
                                                <div class="col-md-3 col-sm-3 ">
                                                    <select class="form-control" id="level">
                                                        <option th:selected="${resultQuestionManage.levelSelected==null}" class="empty-option">请选择</option>
                                                        <option th:each="level,levelstate:${resultQuestionManage.levelList}" th:value="${level.dicId}" th:text="${level.dicValue}" th:selected="${level.dicId==resultQuestionManage.levelSelected}">Choose option</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="item form-group ">
                                                <div class="col-md-3 col-sm-3 offset-md-3">
                                                    <button type="button" class="btn btn-success" id="ques-search" style="white-space: nowrap">确定</button>
                                                </div>
                                            </div>

                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="card-box table-responsive">
                                        <table id="MyDatatable" class="table table-striped table-bordered"
                                               style="width:100%">
                                            <thead>
                                            <tr>
                                                <th>试题编号</th>
                                                <th>试题正文</th>
                                                <th>试题答案</th>
                                                <th>试题解析</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>

                                            <tbody>
                                            <tr th:each="ques:${resultQuestionManage.questionList}">
                                                <td th:text="${ques.quesId}"></td>
                                                <td th:text="${ques.quesContent}"></td>
                                                <td th:text="${ques.quesAnswer}"></td>
                                                <td th:text="${ques.quesDescribe}"></td>
                                                <td class="col-operate">
                                                    <button type="button"
                                                            class="btn btn-modify btn-warning btn-sm ques-modify">申请修改
                                                    </button>
                                                    <button type="button" class="btn btn-delete btn-danger btn-sm ques-detail" >
                                                        查看详情
                                                    </button>
                                                </td>
                                            </tr>
                                            </tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <!-- /page content -->
        <!-- footer content -->
        <div th:replace="include/footer::footer"></div>
        <!-- /footer content -->
    </div>
</div>

<div th:replace="include/javascript::javascript"></div>

<script th:inline="javascript">
    $(function () {
        var li=$("#sidebar-menu .menu_section").find('li').eq(0);
        li.addClass('active');
        var ul=li.find('ul').eq(0);
        ul.css('display','block');
        var cur=ul.find('li').eq(1);
        cur.addClass('current-page');
        li.addClass('active');
        $("#ques-search").on("click",function () {
            var section=$("#section").find("option:selected").val();
            var type=$("#type").find("option:selected").val();
            var level=$("#level").find("option:selected").val();
            if (section=='请选择'){
                section=null;
            }
            if (type=='请选择'){
                type=null;
            }
            if (level=='请选择'){
                level=null;
            }
            window.location.href="/question/manage?section="+section+"&&type="+type+"&&level="+level;
        })
        $(".ques-modify").on("click", function () {
            var tds = $(this).parent().parent().find('td');
            var quesId=tds.eq(0).text();
            window.location.href="/question/modify-request?Id="+quesId;
        });
        $(".ques-detail").on("click",function () {
            var section=[[${resultQuestionManage.sectionSelected}]];
            var type=[[${resultQuestionManage.typeSelected}]];
            var level=[[${resultQuestionManage.levelSelected}]];
            var tds = $(this).parent().parent().find('td');
            var quesId=tds.eq(0).text();
            var page="current";
            window.location.href="/question/page-detail?Id="+quesId+"&&section="+section+"&&type="+type+"&&level="+level+"&&page="+page;
        });
        $("#MyDatatable").DataTable({
            'paging': true,
            'lengthChange': true,
            'searching': true,
            'ordering': true,
            'bAutoWidth': false,
            'info': true,
            'autoWidth': false,
            'aLengthMenu':[5,10,20],
            'columnDefs': [
                {
                    "targets": [0],
                    className: "hide-column"
                },
                {
                    "targets": [1,2,3],
                    "Sorting": false,
                    "render": function (data, type, row, meta) {
                        // var order1 = meta.settings._iDisplayStart + meta.row + 1;
                        // var order2 = order1 + '、';
                        return type === 'display' && data.length > 20 ?
                            '<span title="' + data + '">' + data.substr(0, 16) + '...</span>' :  data;
                    }
                },

            ]
        });
    })
</script>
</body>
</html>
